<template>
  <div class="sliderVerify" v-if="isLoad" :style="sv.containerStyle.value">
    <div class="sv-b1" :style="sv.originPic.value">
      <div class="sv-pic">
        <img src="../../images/p1.png" alt="" :style="sv.originPic.value" />
      </div>
      <div class="sv-mask" :style="sv.maskStyle.value">
        <img src="../../images/p1.png" alt="" :style="sv.maskPic.value" />
      </div>
    </div>
    <div class="sv-btn">
      <div class="sv-btn-inner" :style="sv.btnStyle.value" @touchstart.prevent.stop="sv.onStart" @touchmove.prevent.stop="sv.onMove" @touchend="sv.onEnd"></div>
    </div>
    <div class="sv-result"></div>
  </div>
  <div>
    <button @click="add">添加</button>
  </div>
</template>
<script>
import SliderVerify from './class/SliderVerify.class.js'
import { markRaw } from 'vue'
export default {
  data() {
    return {
      sv: null,
      isLoad: false
    }
  },
  methods: {},
  mounted() {
    this.sv = markRaw(
      new SliderVerify({
        px: 100,
        py: 100,
        mask_w: 50,
        mask_h: 50,
        pic_w: 300,
        pic_h: 300,
        onCheck(flag) {
          console.log(`校验结果`, flag)
        }
      })
    )
    this.isLoad = true
  }
}
</script>
<style type="text/css" lang="scss">
.sliderVerify {
  width: 300px;
  .sv {
    &-b1 {
      position: relative;
    }
    &-pic {
      position: absolute;
      left: 0;
      top: 0;
      img {
        display: block;
      }
    }
    &-mask {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid #fff;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
      img {
        display: block;
        position: relative;
        top: 0px;
        opacity: 0.5;
      }
    }
    &-btn {
      height: 30px;
      background: grey;
      display: flex;
      align-items: center;
      &-inner {
        height: 20px;
        width: 40px;
        background: #000;
      }
    }
  }
}
</style>
